<template>
  <div class="mall-recommend">
    <!-- 轮播组件 -->
    <AdCarousel :carousel-list="carouselList" />
    
    <!-- 使用新样式的商品列表 -->
    <ProductList 
      title="热卖推荐" 
      :product-list="productList" 
    />
  </div>
</template>

<script setup>
import AdCarousel from '../mall/AdCarousel.vue';
import ProductList from '../mall/ProductList.vue';
import { ref } from 'vue';

const carouselList = ref([
  {
    imgUrl: 'https://cbu01.alicdn.com/img/ibank/O1CN01GtwNZ41j9nXeEiGX7_!!3966464506-0-cib.jpg',
    alt: '宠物项圈',
    title: '不止是一个狗圈',
    subtitle: '更是创新的开始'
  }
]);

// 根据第二张图片调整商品数据
const productList = ref([
  {
    tag: '新品',
    imgUrl: 'https://picsum.photos/80/80?random=1',
    name: '【毛仆】宠物冻干零食',
    desc: '新鲜0添加 真实有料',
    price: '8.00元'
  },
  {
    tag: '热卖',
    imgUrl: 'https://picsum.photos/80/80?random=2',
    name: 'WOAO冻干爆珠凤尾鱼油',
    desc: '毛发富力生长 远离异常掉毛',
    price: '45.00元'
  },
  {
    tag: '新品',
    imgUrl: 'https://picsum.photos/80/80?random=3',
    name: '68宠物声光寻宠定位器 神秘紫',
    desc: '声光寻宠 90天续航 0-1米误差 电子围栏',
    price: '329.00元'
  },
  {
    tag: '新品',
    imgUrl: 'https://picsum.photos/80/80?random=4',
    name: '68宠物定位器',
    desc: '90天续航 0-1米误差 电子围栏',
    price: '299.00元'
  }
]);
</script>

<style scoped>
.mall-recommend {
  padding-top: 16px;
  background: #f5f5f5;
  min-height: calc(100vh - 140px);
}
</style>